---
title: 自定义绘制内容
---

Univer 提供了一套扩展机制，可以让你在电子表格中自定义绘制内容。这个机制可以用于实现自定义的行标题、列标题、中间内容区域的渲染。

<PlaygroundFrame lang="zh-CN" slug="sheets/custom-canvas" clickToShow />

Univer 部分元素的渲染，如边框和背景，就是使用扩展机制来完成的。Facade 内置了常用扩展注册 API：

- 中间内容区域：[`registerSheetMainExtension`](https://reference.univer.ai/zh-CN/classes/FUniver#registersheetmainextension)
- 行标题：[`registerSheetRowHeaderExtension`](https://reference.univer.ai/zh-CN/classes/FUniver#registersheetrowheaderextension)
- 列标题：[`registerSheetColumnHeaderExtension`](https://reference.univer.ai/zh-CN/classes/FUniver#registersheetcolumnheaderextension)

继承 `SheetExtension` 后，提供唯一键值、层级、绘制逻辑就能实现一个 Sheet 渲染扩展。如下：

```typescript
class RowHeaderCustomExtension extends SheetExtension {
  override uKey = 'RowHeaderCustomExtension'

  // 必须大于 10
  override get zIndex() {
    return 11
  }

  override draw(ctx: UniverRenderingContext, parentScale: IScale, spreadsheetSkeleton: SpreadsheetSkeleton) {
    // ... 主要的渲染逻辑
  }
}

SheetRowHeaderExtensionRegistry.add(new RowHeaderCustomExtension())
```

<Callout>
  行标题、列标题的扩展 zIndex 必须大于 10，中间内容区域的扩展 zIndex 必须大于 50，否则会被覆盖。
</Callout>

然后注册到指定的 unitId 上：

```typescript
univerAPI.registerSheetRowHeaderExtension(unitId, new RowHeaderCustomExtension())
```

值得注意的是，`UniverRenderingContext` 本质上就是 [CanvasRenderingContext2D](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D)，你可以根据自己的需求（例如先清空原有的行、列标题）来进行绘制。
